<template>
	<view style="width: 130%;">
		<view id="searchBock">
			<u-button shape="square" class="search" id="search" >
				<!-- @click="search()" -->
				<i>请输入搜索内容</i>
				<u-icon id="searchIcon" name="search"></u-icon>
			</u-button>
		</view>
		<view style="height: 30px;">
			<!-- 11111111.{{ data }} -->
			<span v-for="(item,index) in data" key="index" class="navi" :class="{ 'active': selectedIndex === index }" @click="selectItem(index)">
				{{ item }}&zwj;
				<!-- .naName -->
			</span>
		</view>
		<view v-if="selectedIndex == 0">
			
		</view>
		<view v-if="selectedIndex == 1">
			<rank></rank>
		</view>
		<view v-if="selectedIndex == 2">
			<classify></classify>
		</view>
		<view v-if="selectedIndex == 3">
			<knowledge></knowledge>
		</view>
		<view v-if="selectedIndex == 4">
			
		</view>
		<view v-if="selectedIndex == 5">
			
		</view>
		<view v-if="selectedIndex == 6">
			
		</view>
	</view>
</template>

<script>
	import url from '../../api/env.js'
	import rank from '../RankingPage/RankingPage.vue'
	import classify from '../classical/classical.vue'
	import knowledge from '../knowledge/knowledge.vue'
	export default {
		data() {
			return {
				data: ['推荐', '经典', '知识', '听书', '漫画', '最新上架', '关注'],
				//['推荐', '经典', '知识', '听书', '漫画', '最新上架', '关注'],
				selectedIndex: 1,
			}
		},
		components: {
			rank,
			classify,
			knowledge
		},
		mounted() {
			// this.getNavigation();
		},
		methods: {
			selectItem(index) {
				console.log(index)
			    this.selectedIndex = index;
			},
			search() {
				console.log("点击了搜索框")
				uni.navigateTo({
					// url: '/components/search/search'
				});
			},
			getNavigation() {
				uni.request({
					url: url.dev.baseUrl + 'fiction/tbnavigation/getAll',
					method:'post',
					data:'',
					success: (res) => {
						console.log(res.data)
						this.data = res.data.data
						console.log(this.data)
					},
					catchj(err) {
						console.log(err)
					}
				})
				// this.$http({
				// 	url: this.$http.adornUrl(`/fiction/tbnavigation/getAll`),
				// 	method: 'post',
				// 	data: this.$http.adornData({})
				// }).then((res) => {
				// 	console.log(res)
				// 	this.data = res.data
				// 	console.log(this.data)
				// })
			},
		}
	}
</script>

<style>
	#searchBock {
		width: 73%;
		margin-left: 10px;
	}

	#search {
		width: 73%;
		margin: 0px;
		/* display: flex; */
		/* float: left; */
		/* border: 1px; */
	}
	.search{
		border-radius: 80px;
	}
	#searchIcon {
		
		/* width: 12%; */
		/* margin: 0rem 85% 0rem 0rem; */
		/* padding: 0px 35px 0px 5rem; */
		
	}
	.active{
		color: aqua;
		font-size: 10px;
		padding: 10px;
	}
	.navi{
		padding: 10px;
	}
	active:focus {
	  font-size: smaller;
	}
	 
	.active {
	  font-size: larger;
	}
</style>